<template>
    <div class="fxkh-wrapper">
        <el-col :span="4">
            <ul class="fxkh-btns">
                <li class="selected">雨情简报</li>
                <li>水库水情简报</li>
                <li>江河水情简报</li>
                <li>涵闸水情简报</li>
                <li>山洪雨情简报</li>
                <li>山洪水情简报</li>
                <li>天气预报</li>
                <li>防汛调度</li>
            </ul>
        </el-col>
        <el-col v-show="!fxkhTab && !fxddTab" :span="20">
            <el-col :span="spanNum">
                <div class="fxkh-content">
                    <ul class="weather-tab">
                        <li value="weather1d" class="selected">今天</li>
                        <li value="weather">7天</li>
                        <li value="weather15d">8-15天</li>
                        <li value="radar">雷达图</li>
                        <li value="satellite">卫星图</li>
                    </ul>
                    <div v-show="!cityState" :class="coverImgDiv" style="position:absolute;background-color:transparent;left:60px;top:80px;"></div>
                    <div v-show="!cityState" style="position:absolute;height:30px;width:260px;float:right;background-color:#f9f9f9;right:40px;top:40px;z-index:1003"></div>
                    <div v-show="!cityState" :class="coverTabDiv" style="position:absolute;height:30px;width:160px;float:right;background-color:#f9f9f9;right:40px;z-index:1003">
                        <div class="zoom" @click="enlargeWindow">
                        放大
                        </div>
                    </div>
                    <div :class="boxsize" style="overflow:hidden;border:0px"> 
                        <div :class="boxmargin" style="width:1200px;height:1200px;"> 
                            <iframe id='weatherIframe' :src='weatherReportUrl' width="1200" height="1280" scrolling="no"></iframe> 
                        </div> 
                    </div> 
                </div>
            </el-col>
            <el-col :span="4" v-show="cityState">
                <ul class="fxkh-citys">
                    <li class="selected">黄州区</li>
                    <li>麻城市</li>
                    <li>武穴市</li>
                    <li>团风县</li>
                    <li>浠水县</li>
                    <li>罗田县</li>
                    <li>英山县</li>
                    <li>蕲春县</li>
                    <li>黄梅县</li>
                    <li>红安县</li>
                </ul>
            </el-col>
        </el-col>
        <el-col v-show="fxddTab" :span="20" style="overflow:hidden">
          <!-- <canvas id="the-canvas" style="margin-top: -100px"></canvas> -->
          <div id="pdf-object" style="height: 800px;"></div>
          <!-- <div class="pdf-btn" style="text-align: center">
            <el-button @click="changePdfPage" size="small">上一页</el-button>
            <el-button @click="changePdfPage(true)" size="small">下一页</el-button>
          </div> -->
          
        </el-col>
        <el-col v-show="fxkhTab" :span="20">
            <!-- <hgweb :iframeUrl="iframeUrl"></hgweb> -->
            <component :is="current" keep-alive></component>
            <hgweb-login iframeUrl="Report/HuangGang/LakeWASHuangGang.aspx" v-on:hgweb-login="hgwebLogin = true"></hgweb-login>
            <!-- <hgweb v-show="tabText === '雨情简报'" iframeUrl="Report/HuangGang/RainTable.aspx" :hgwebLogin="hgwebLogin" iframeId="hgwebIframe1"></hgweb> -->
            <!-- <hgweb v-show="tabText === '水库水情简报'" iframeUrl="Report/HuangGang/RealRsvrLatest.aspx" :hgwebLogin="hgwebLogin" iframeId="hgwebIframe2"></hgweb> -->
            <!-- <hgweb v-show="tabText === '江河水情简报'" iframeUrl="Report/HuangGang/RiverWaterTableHuangGang.aspx" :hgwebLogin="hgwebLogin" iframeId="hgwebIframe3"></hgweb> -->
            <!-- <hgweb v-show="tabText === '涵闸水情简报'" iframeUrl="Report/HuangGang/LakeWASHuangGang.aspx" :hgwebLogin="hgwebLogin" iframeId="hgwebIframe4"></hgweb> -->
            <!-- <hgweb v-show="tabText === '山洪雨情简报'" iframeUrl="Report/HuangGang/RainTableSH.aspx" :hgwebLogin="hgwebLogin" iframeId="hgwebIframe5"></hgweb> -->
            <!-- <hgweb v-show="tabText === '山洪水情简报'" iframeUrl="Report/HuangGang/RiverWaterTableShanHongHuangGang.aspx" :hgwebLogin="hgwebLogin" iframeId="hgwebIframe6"></hgweb> -->
        </el-col>
        
        <div style="clear:both;"></div>
    </div>
</template>

<script>
import yqjb from "./yqjb.vue"; //雨情简报
import sksqjb from "./sksqjb.vue"; //水库水晴简报
import jhsqjb from "./jhsqjb.vue"; //江河水情简报
import hzsqjb from "./hzsqjb.vue"; //涵闸水情简报
import shyqjb from "./shyqjb.vue"; //山洪雨情简报
import shsqjb from "./shsqjb.vue"; //山洪水情简报

import tableCols from "../../../jsons/fxkhData.json";
import axios from "axios";
import hgweb from "./../hgweb.vue";
import hgwebLogin from "./../hgwebLogin.vue";
var pdfobject = require("pdfobject");

export default {
  name: "fxkh",
  data: function() {
    return {
      hgwebLogin: false,
      loading: true,
      tLoading: true,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      tabText: "",
      current: yqjb,
      columnName: "",
      keywords: "",
      fxkhTab: true,
      fxddTab: false,
      spanNum: 20,
      cityState: true,
      boxsize: "box-weather-small", //窗口大小
      boxmargin: "box-margin-small",
      coverImgDiv: "cover-img-small",
      coverTabDiv: "cover-tab-small",
      weatherReportUrl: "",
      city: "黄州区",
      weatherStr: "weather1d",
      cityList: {
        黄州区: "101200511",
        麻城市: "101200503",
        武穴市: "101200509",
        团风县: "101200510",
        浠水县: "101200506",
        罗田县: "101200504",
        英山县: "101200505",
        蕲春县: "101200507",
        黄梅县: "101200508",
        红安县: "101200502"
      },
      cols: [],
      tableData: [],
      tableData1: [],
      curPdfPage: 1
    };
  },
  components: {
    hgweb,
    hgwebLogin,
    yqjb,
    sksqjb,
    jhsqjb,
    hzsqjb,
    shyqjb,
    shsqjb
  },
  computed: {
    iframeUrl() {
      var url = "index.aspx";
      var tabText = this.tabText;
      if (tabText === "雨情简报") {
        url = "Report/HuangGang/RainTable.aspx";
      } else if (tabText === "水库水情简报") {
        url = "Report/HuangGang/RealRsvrLatest.aspx";
      } else if (tabText === "江河水情简报") {
        url = "Report/HuangGang/RiverWaterTableHuangGang.aspx";
      } else if (tabText === "涵闸水情简报") {
        url = "Report/HuangGang/LakeWASHuangGang.aspx";
      } else if (tabText === "山洪雨情简报") {
        url = "Report/HuangGang/RainTableSH.aspx";
      } else if (tabText === "山洪水情简报") {
        url = "Report/HuangGang/RiverWaterTableShanHongHuangGang.aspx";
      }
      return url;
    }
  },
  methods: {
    changeSize(val) {
      this.pageSize = val;
    },
    pageChange(val) {
      this.currentPage = val;
    },
    getWeatherReportUrl(cityStr, dateStr) {
      var _url = "http://www.weather.com.cn/";
      if (dateStr == "" || dateStr == undefined)
        _url += this.weatherStr + "/" + this.cityList[cityStr] + ".shtml";
      else if (dateStr == "radar") {
        //雷达图
        this.cityState = false;
        this.spanNum = 24;
        this.boxsize = "box-weather-more";
        this.boxmargin = "box-margin-more";
        this.coverImgDiv = "cover-img-big";
        this.coverTabDiv = "cover-tab-big";
        _url = "http://www.nmc.cn/publish/radar/huazhong.html";
      } else if (dateStr == "satellite") {
        this.cityState = false;
        this.spanNum = 24;
        this.boxsize = "box-weather-big";
        this.boxmargin = "box-margin-big";
        this.coverImgDiv = "cover-img-small";
        this.coverTabDiv = "cover-tab-small";
        _url = "http://www.nmc.cn/publish/satellite/fy2.htm";
      } else {
        this.weatherStr = dateStr;
        this.cityState = true;
        this.spanNum = 20;
        this.boxmargin = "box-margin-small";
        if (dateStr == "weather15d") {
          this.boxsize = "box-weather-mid";
        } else this.boxsize = "box-weather-small";
        _url += dateStr + "/" + this.cityList[cityStr] + ".shtml";
      }

      console.log("新地址为：" + _url);
      this.weatherReportUrl = _url;
      // return _url;
    },
    initLeftBtns() {
      var lis = document.getElementsByClassName("fxkh-btns")[0].children;
      let domObj = this;
      for (var index = 0; index < lis.length; index++) {
        lis[index].onclick = function() {
          var _ul = domObj.$el.getElementsByClassName("fxkh-btns")[0];
          _ul.getElementsByClassName("selected")[0].removeAttribute("class");
          this.setAttribute("class", "selected");
          if (this.textContent == "天气预报") {
            domObj.fxddTab = false;
            domObj.fxkhTab = false;
          } else if (this.textContent == "防汛调度") {
            domObj.fxddTab = true;
            domObj.fxkhTab = false;
            pdfobject.embed(
              "/door/uploadfiles/null1511251044.pdf",
              "#pdf-object"
            );
          } else {
            domObj.fxkhTab = true;
            domObj.fxddTab = false;
            domObj.tabText = this.textContent;
            domObj.keywords = "";
            domObj.currentPage = 1;
            domObj.pageSize = 10;
          }
        };
      }
    },
    initRightBtns() {
      var lis = document.getElementsByClassName("fxkh-citys")[0].children;
      let domObj = this;
      for (var index = 0; index < lis.length; index++) {
        lis[index].onclick = function() {
          domObj.loading = true;
          var _ul = domObj.$el.getElementsByClassName("fxkh-citys")[0];
          _ul.getElementsByClassName("selected")[0].removeAttribute("class");
          this.setAttribute("class", "selected");
          domObj.city = this.textContent;
          domObj.getWeatherReportUrl(this.textContent);
        };
      }
    },
    initTabBtns() {
      var lis = document.getElementsByClassName("weather-tab")[0].children;
      let domObj = this;
      for (var index = 0; index < lis.length; index++) {
        lis[index].onclick = function() {
          domObj.loading = true;
          var _ul = domObj.$el.getElementsByClassName("weather-tab")[0];
          _ul.getElementsByClassName("selected")[0].removeAttribute("class");
          this.setAttribute("class", "selected");
          domObj.getWeatherReportUrl(domObj.city, this.getAttribute("value"));
        };
      }
    },
    enlargeWindow() {
      if (this.coverImgDiv == "cover-img-small") {
        this.$store.commit("TOGGLE_WEATHER_SHOW", "1");
      } else {
        this.$store.commit("TOGGLE_WEATHER_SHOW", "2");
      }
    },
    formatter(row) {
      // console.log(row);
      if (this.tabText == "实时雨情") {
        switch (row.wth) {
          case "5":
            return "雪";
            break;
          case "6":
            return "雨夹雪";
            break;
          case "7":
            return "雨";
            break;
          case "8":
            return "阴";
            break;
          case "9":
            return "晴";
            break;
          default:
            break;
        }
      } else if (this.tabText == "长江水位") {
      } else if (this.tabText == "水库水情") {
        switch (row.rwptn) {
          case "4":
            return "fa fa-arrow-down";
            break;
          case "5":
            return "fa fa-arrow-up";
            break;
          case "6":
            return "fa fa-arrows-h";
            break;
          default:
            break;
        }
      } else if (this.tabText == "河道水情") {
        switch (row.wptn) {
          case "4":
            return "fa fa-arrow-down";
            break;
          case "5":
            return "fa fa-arrow-up";
            break;
          case "6":
            return "fa fa-arrows-h";
            break;
          default:
            break;
        }
      }
    }
  },
  watch: {
    keywords: function(val) {
      console.log(this.keywords);
      var _this = this;
    },
    tabText: function(val) {
      console.log(val);
      if (val == "雨情简报") {
        this.current = yqjb;
      } else if (val == "水库水情简报") {
        this.current = sksqjb;
      } else if (val == "江河水情简报") {
        this.current = jhsqjb;
      } else if (val == "涵闸水情简报") {
        this.current = hzsqjb;
      } else if (val == "山洪雨情简报") {
        this.current = shyqjb;
      } else if (val == "山洪水情简报") {
        this.current = shsqjb;
      }
    }
  },
  mounted() {
    //初始化链接
    this.getWeatherReportUrl("黄州区");

    //初始化左侧菜单
    this.initLeftBtns();
    //初始化右侧菜单
    this.initRightBtns();
    //初始化天气预报菜单
    this.initTabBtns();
    //判断iframe加载进度
    var iframe = document.getElementById("weatherIframe");

    var _this = this;
    // if (iframe.attachEvent) {
    //   iframe.attachEvent("onload", function() {
    //     _this.loading = false;
    //   });
    // } else {
    //   iframe.onload = function() {
    //     _this.loading = false;
    //   };
    // }

    this.tabText = "雨情简报";
    this.current = yqjb;
  }
};
</script>

<style lang="scss">
.fxkh-wrapper {
  height: 100%;
  // padding: 8px;
  .fxkh-btns {
    margin-top: 35px;
    text-align: center;
    li {
      width: 128px;
      margin: 0 auto;
      margin-bottom: 15px;
      height: 45px;
      line-height: 46px;
      background: #f1f1f1;
      text-align: center;
      display: block;
      a:hover {
        background-color: #2873a6;
      }
    }
    li:hover,
    li.selected {
      cursor: pointer;
      color: #fff;
      background-color: #2873a6;
    }
  }
  .fxkh-citys {
    margin-top: 35px;
    text-align: center;
    li {
      width: 108px;
      margin: 0 auto;
      margin-bottom: 12px;
      height: 30px;
      line-height: 30px;
      background: #f1f1f1;
      text-align: center;
      display: block;
      a:hover {
        background-color: #2873a6;
      }
    }
    li:hover,
    li.selected {
      cursor: pointer;
      color: #fff;
      background-color: #2873a6;
    }
  }
  .fxkh-content {
    margin-top: 15px;
    position: relative;
    .weather-tab {
      margin-left: 42px;
      li {
        float: left;
        // margin-left: 43px;
        background: #d0ebff;
        color: #252525;
        cursor: pointer;
        height: 32px;
        line-height: 32px;
        margin-right: 2px;
        text-align: center;
        width: 134px;
        position: relative;
      }
      li:hover,
      li.selected {
        cursor: pointer;
        background-color: #ecf7ff;
      }
    }
    .zoom {
      right: 100px;
      background: url(/src/assets/img/zoom.png) no-repeat left center;
      padding-left: 20px;
      font-size: 15px;
      line-height: 32px;
      margin-left: 25px;
      cursor: pointer;
    }
  }
}

.box-weather-small {
  width: 700px;
  height: 600px;
  margin-left: 42px;
}
.box-weather-mid {
  width: 700px;
  height: 460px;
  margin-left: 42px;
}
.box-weather-big {
  width: 1000px;
  height: 800px;
  margin-left: 12px;
}
.box-weather-more {
  width: 1000px;
  height: 900px;
  margin-left: 12px;
}
.box-margin-small {
  margin-top: -275px;
  margin-left: -100px;
}
.box-margin-big {
  margin-top: -225px;
  margin-left: -250px;
}
.box-margin-more {
  margin-top: -265px;
  margin-left: -250px;
}
.el-loading-mask {
  opacity: 0.5;
}
.cover-img-small {
  height: 620px;
  width: 855px;
}
.cover-img-big {
  height: 660px;
  width: 855px;
}
.cover-tab-small {
  bottom: 100px;
}
.cover-tab-big {
  bottom: 153px;
}
.page-wrapper {
  text-align: right;
  padding: 10px 0;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  background-color: gray;
}

i.fa-arrow-up {
  color: #f00;
}
i.fa-arrow-down {
  color: green;
}
</style>